<template>
  <view class="wrap">
    <uv-navbar :fixed="false" autoBack safeAreaInsetTop placeholder :border='false'>
      <!-- <template v-slot:left>
        <view class="navEditName nav-left">取消</view>
      </template> -->
      <template v-slot:right>
        <view class="navEditName nav-right" @click="tap">完成</view>
      </template>
      <template v-slot:center>
        <view class="navInput">
          <uv-input placeholder="搜索话题" border="none" v-model="search.name" focus prefixIcon='search' fontSize='28rpx' color='#000' prefixIconStyle='font-size: 28rpx; color: #B8B8B8;' @input='inputChange'></uv-input>
        </view>
      </template>
    </uv-navbar>
    <template v-if="search.name">
      <view class="small">群话题</view>
      <view class="list">
        <view class="item" v-if="content.name">{{ content.name }}</view>
        <view class="item" v-for="(item,index) in list" :key="index" @click="tagClick(item)">{{ item.name }}</view>
      </view>
    </template>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useOrder } from '@/store';
import { post } from '@/api';
import { toast } from '@/common';

let search = ref({
  name: ''
});
let content = ref({
  name: ''
});
let list = ref([]);
let timeOut = null;

let body = computed(() => {
  const store = useOrder();
  return uni.$uv.deepClone(store.group);
});

// 保存
function tap(){
  if(!search.value.name) return toast('请选择话题标签');
  
  if(content.value.name){
    const params = {
      association_id: body.value.id,
      name: content.value.name
    }
    post('api/association_talk/addAssociationTalk', params).then(res => {
      if(res.code == 1){
        getList('getNewId'); // 将新的话题标签添加到数据库，然后重新获取列表
      }
    })
  }else{
    uni.$emit('update', { msg: search.value })
    back();
  }
}
// 获取列表数据
function getList(value){
  const params = {
    page: 1,
    limit: 200,
    association_id: body.value.id,
    name: search.value.name
  }
  post('api/association_talk/getAssociationTalkList', params).then(res => {
    if(res.code == 1){
      const { data } = res.data;
      
      // 重新获取新的列表后，然后在数据库中与当前输入的数据进行匹配，将新数据返回给上个页面
      if(value == 'getNewId'){ 
        const row = data.find(o => o.name == content.value.name);
        uni.$emit('update', { msg: row })
        back();
        return;
      }
      
      list.value = data;
    }
  })
}
// 用户输入时,输入框发生变化
function inputChange(value){
  if(timeOut) clearTimeout(timeOut);
  timeOut = setTimeout(() => {
    // 判断用户输入的内容在服务器上有没有对应的数据,如果有,直接清空自定义
    const index = list.value.findIndex(o => o.name == value);
    if(index >= 0){
      content.value.name = '';
    }else{
      content.value.name = value;
    }
    timeOut = null;
    getList();
  }, 500)
}
// 标签选中
function tagClick(row){
  search.value = row;
  setTimeout(() => {
    content.value.name = '';
  }, 500)
}
function back(){
  uni.navigateBack({
    delta: 1
  });
}
</script>

<style lang="scss" scoped>
  .list{
    padding: 0 30rpx;
    padding-top: 20rpx;
    .item{
      font-weight: 400;
      font-size: 28rpx;
      color: #2B2B2B;
      width: 100%;
      height: 64rpx;
      line-height: 64rpx;
      border-radius: 64rpx;
      padding: 20rpx 0;
      margin-right: 24rpx;
      margin-bottom: 12rpx;
    }
  }
  .small{
    font-weight: 500;
    font-size: 32rpx;
    color: #2B2B2B;
    padding: 0 30rpx;
    padding-top: 34rpx;
  }
  .navInput{
    width: 68%;
    background-color: #F5F5F5;
    height: 68rpx;
    line-height: 68rpx;
    border-radius: 68rpx;
    padding: 0 20rpx;
    display: flex;
    align-items: center;
  }
  .navEditName{
    font-weight: 400;
    font-size: 28rpx;
    &.nav-left{
      color: #737373;
    }
    &.nav-right{
      color: #E43222;
    }
  }
</style>